<template>
    <div class="selectRadio">
        <el-select v-model="value" filterable
            placeholder="请选择" clearable
            @change='handleChange'
             ref='selectRadio'
             @visible-change="visibleChange">
            <el-option
                v-for="item in list" :key="item.value" :label="item.label"
                :value="item.value"
                class="optionList"    
            >
                <template>
                    <div>
                        <span :style="listColor(item)">{{ item.label }}</span>
                    </div>
                </template>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    props: {
        iptAttritube: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            value: '',
            selLoading: false,
            list: [],
            num: 0,
            state: true,
            selectMess: {}
        }
    },
    mounted() {
        let data = []
        if(this.iptAttritube.customFieldMess && this.iptAttritube.customFieldMess != null) {
            this.selectMess = this.iptAttritube.customFieldMess
        } else {
            this.selectMess = this.iptAttritube
        }
        if(this.selectMess.fieldType == 'selectRadio') {
            data = JSON.parse(this.selectMess.checkBox)
            data.map(item => {
                this.list.push({
                    label: item.value,
                    value: item.value,
                    color: item.color
                })
            })
        } else if(this.selectMess.fieldType == 'relevanceObject') {
            this.selectMess.objectsValue.map(item => {
                this.list.push({
                    label: item.code ? item.name + ' | ' + item.code : item.name,
                    value: item.code ? item.name + ' | ' + item.code : item.name,
                    node: item,
                    id: item.id,
                })
            })
        }
    },
    methods: {
        visibleChange() {
            this.$nextTick(() => {
                this.styleSet()
            })
        },
        handleChange() {
            let value = {
                value: this.value
            }
            if(this.selectMess.fieldType == 'selectRadio') {
                this.$emit('handleChange', value)
            } else if(this.selectMess.fieldType == 'relevanceObject') {
                let d = this.list.find(res => { 
                    return res.value == this.value
                })
                let relevanceObject = {
                    businessObject: this.selectMess.businessObject,
                    id: d ? d.id : '',
                    fillRule: this.selectMess.fillRule != "" ? JSON.parse(this.selectMess.fillRule) : []
                }
                this.$emit('handleChange', value, relevanceObject)
            }
            this.$nextTick(() => {
                this.$refs.selectRadio.blur()
                this.styleSet()
            })
        },
        listColor(c) {
            if(this.selectMess.fieldType == 'selectRadio') {
                return {
                    'background': (c.color).substr(0, 3) + 'a' + (c.color).substr(3, c.color.length - 4) + ', .1)',
                    'color': c.color,
                    'padding': '2px 7px',
                    'border-radius': '3px',
                    'font-size': '13px',
                    'line-height': '22px',
                    'display': 'inline-block'
                }
            }
        },
        defaultData(d) {
            this.value = ''
            d.map(item => {
                if(item.customFieldId == this.selectMess.id) {
                    this.value = item.value
                }
            })
            this.$nextTick(() => {
                this.styleSet()
            })
        },
        styleSet() {
            let d = this.list.find(res => { return res.value == this.value })
            if(d != undefined) {
                this.$refs.selectRadio.$children[0].$el.children[0].style.color = d.color
            } else {
                this.$refs.selectRadio.$children[0].$el.children[0].style.color = '#333'
            }
        },
        removeSure() {
            
        }
    }
}
</script>